<template>
    <div>
        <el-button @click="showDialog('insert')" class="slot-btn-top" type="primary" size="small">添加</el-button>
        <el-input placeholder="请输入浆站名" v-model="search.codition" class="inputSuffix">
            <el-button slot="append" icon="el-icon-search" @click="searchSubmit"></el-button>
        </el-input>
        <el-table :data="dataList" stripe border :height="tableHeight" :header-cell-style="getRowClass" v-loading='loading'>
            <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
            <el-table-column prop="name" label="位置名称"  min-width="100"></el-table-column>
            <el-table-column prop="creatorName" label="创建人"  min-width="90"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"  min-width="90"></el-table-column>
            <el-table-column fixed="right" label="操作"  align="right" width="200">
                <template slot-scope="scope">
                    <el-button @click="showDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                     <el-button @click="showDialog1(scope.row)" type="text" size="mini">现象</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <el-dialog :title="dialog.title" width="600" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-form :inline="true" class="demo-form-inline" v-model="dialog.formData" label-position="right" label-width="180px">
                <el-form-item label="位置名称"><el-input v-model="dialog.formData.name" ></el-input></el-form-item>
                <el-form-item label="创建人" v-if="dialog.title==='修改位置'"><el-input v-model="dialog.formData.creatorName" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" v-if="dialog.title==='修改位置'"><el-input v-model="dialog.formData.createTime" disabled></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="addUpdate" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="600" top="30px" :visible.sync="dialog1.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :syle="tableDialogHeightTabPane">
                <el-button @click="showDialog2('insert')" class="slot-btn-top" type="primary" size="small">添加</el-button>
                <el-table :data="dialog1.tableList" stripe border   :header-cell-style="getRowClass" v-loading='loading' >
                    <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
                    <el-table-column prop="name" label="现象描述"  min-width="100"></el-table-column>
                    <el-table-column prop="creatorName" label="创建人"  min-width="90"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"  min-width="90"></el-table-column>
                    <el-table-column fixed="right" label="操作"  align="right" width="200">
                        <template slot-scope="scope">
                            <el-button @click="showDialog2('update',scope.row)" type="text" size="mini">编辑</el-button>
                             <el-button @click="showDialog3(scope.row)" type="text" size="mini">问题</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="600" top="30px" :visible.sync="dialog2.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-form :inline="true" class="demo-form-inline" v-model="dialog2.formData" label-position="right" label-width="180px">
                <el-form-item label="现象描述"><el-input v-model="dialog2.formData.name"  type="textarea" ></el-input></el-form-item>
                <el-form-item label="创建人" v-if="dialog2.title==='编辑现象'"><el-input v-model="dialog2.formData.creatorName" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" v-if="dialog2.title==='编辑现象'"><el-input v-model="dialog2.formData.createTime" disabled></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="addUpdatePhenomenon" type="primary">确 定</el-button>
            </div>
        </el-dialog>
         <el-dialog :title="dialog3.title" width="600" top="30px" :visible.sync="dialog3.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :syle="tableDialogHeightTabPane">
                <el-button @click="showDialog4('insert')" class="slot-btn-top" type="primary" size="small">添加</el-button>
                <el-table :data="dialog3.tableList" stripe border   :header-cell-style="getRowClass" v-loading='loading' >
                    <el-table-column fixed type="index" label="*"  min-width="40"></el-table-column>
                    <el-table-column prop="name" label="问题描述"  min-width="100"></el-table-column>
                    <el-table-column prop="creatorName" label="创建人"  min-width="90"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"  min-width="90"></el-table-column>
                    <el-table-column fixed="right" label="操作"  align="right" width="200">
                        <template slot-scope="scope">
                            <el-button @click="showDialog4('update',scope.row)" type="text" size="mini">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
         <el-dialog :title="dialog4.title" width="600" top="30px" :visible.sync="dialog4.isShow" :close-on-click-modal="false" v-dialogDrag>
            <el-form :inline="true" class="demo-form-inline" v-model="dialog4.formData" label-position="right" label-width="180px">
                <el-form-item label="问题描述"><el-input v-model="dialog4.formData.name"  type="textarea"></el-input></el-form-item>
                <el-form-item label="创建人" v-if="dialog4.title==='编辑问题'"><el-input v-model="dialog4.formData.creatorName" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" v-if="dialog4.title==='编辑问题'"><el-input v-model="dialog4.formData.createTime" disabled></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="addUpdateProblem" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import postSaleApi from "@/axios/postSale.js"
export default {
    data() {
        return {
            tableHeight:document.documentElement.clientHeight - 140,
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            dataList:[],
            loading:false,
            search:{
                codition:''
            },
            pagination:{
                currentPage:1,
                pageSize:10,
                total:0
            },
            dialog:{
                title:'',
                isShow:false,
                formData:{}
            },
            dialog1:{
                title:'',
                isShow:false,
                tableList:[],
                pid:''
            },
            dialog2:{
                title:'',
                isShow:false,
                formData:{}
            },
            dialog3:{
                title:'',
                isShow:false,
                tableList:[],
                pid:''
            },
            dialog4:{
                title:'',
                isShow:false,
                formData:{}
            },
      }
    },
    created(){
        let self = this;
        self.getDatalist();
    },
    methods:{
        getDatalist(){
            let self = this;
            let data = {
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                codition:self.search.codition
            }
            self.loading = true;
            postSaleApi.shFailureSettingList(data).then(res=>{
               self.dataList=res.content.records;
               self.pagination.total = res.content.total;
                self.loading = false;
            },error=>{
                self.loading = false;
            })
        },
        handleSizeChange(size){
            this.pagination.pageSize = size;
            this.getDatalist();
        },
        handleCurrentChange(current){
            this.pagination.currentPage = current;
            this.getDatalist();
        },
        searchSubmit(){
            this.pagination.pageSize = 1;
            this.getDatalist();
        },
        showDialog(type,row){
            let self = this;
            self.dialog.title = type==='insert'?'新增位置':'修改位置';
            self.dialog.isShow = true;
            self.dialog.formData =type==='insert'?{}:{
                id:row.id,
                name:row.name,
                creatorName:row.creatorName,
                createTime:row.createTime
            }
        },
        addUpdate(){
            let self = this,
            type = self.dialog.title.indexOf('新增')>-1?'insert':'update',
            postData={
                id:self.dialog.formData.id,
                name:self.dialog.formData.name,
            };
            postSaleApi.addUpdateShFailureSetting(type,postData).then(res=>{
                self.dialog.isShow = false;
                self.$message.success(`${self.dialog.title}成功`);
                self.getDatalist();
            })

        },
        showDialog1(row){
            let self = this;
            self.dialog1.title = '现象列表';
            self.dialog1.isShow = true;
            self.dialog1.pid = row.id;
            self.getPhenomenonList();
        },
        showDialog2(type,row){
            let self = this;
            self.dialog2.title = type==='insert'?'新增现象':'修改现象';
            self.dialog2.isShow = true;
            self.dialog2.formData = type==='insert'?{}:{
                id:row.id,
                pid:row.pid,
                name:row.name,
                creator:row.creator,
                creatorName:row.creatorName,
                createTime:row.createTime,
            }
        },
        getPhenomenonList(){
            let self  = this;
            postSaleApi.shPhenomenonList(self.dialog1.pid).then(res=>{
                self.dialog1.tableList = res.content;
            })
        },
        addUpdatePhenomenon(){
            let self = this,
            type=self.dialog2.title.indexOf('新增')>-1?'insert':'update',
            postData = {
                pid:self.dialog1.pid,
                id:self.dialog2.formData.id,
                name:self.dialog2.formData.name
            };
            postSaleApi.addUpdateShPhenomenon(type,postData).then(res=>{
                self.dialog2.isShow = false;
                self.$message.success(`${self.dialog2.title}成功`);
                self.getPhenomenonList();
            })
        },
        showDialog3(row){
            let self = this;
            self.dialog3.title = '问题列表';
            self.dialog3.isShow = true;
            self.dialog3.pid = row.id;
            self.getProblemList()
        },
        showDialog4(type,row){
            let self  = this;
            self.dialog4.title = type==='insert'?'新增问题':'修改问题';
            self.dialog4.isShow = true;
            self.dialog4.formData = type==='insert'?{}:row;
        },
        getProblemList(){
            let self = this;
            postSaleApi.shProblemList(self.dialog3.pid).then(res=>{
                self.dialog3.tableList = res.content;
            })
        },
        addUpdateProblem(){
            let self = this,
            type= self.dialog4.title.indexOf('新增')>-1?'insert':'update',
            postData={
                pid:self.dialog3.pid,
                id:self.dialog4.formData.id,
                name:self.dialog4.formData.name
            };
            postSaleApi.addUpdateShProblem(type,postData).then(res=>{
                self.dialog4.isShow = false;
                self.$message.success(`${self.dialog4.title}成功`);
                self.getProblemList();
            })
        }
    }
  }
</script>
<style scoped>
</style>
